<template>
  <div class="tactics_m" style="">
   <div class="tactics_r">
     <div @click="btnTactics(1)" style="cursor:pointer;" :class="{cur:index === 1}">策略配置</div>
     <div @click="btnTactics(2)" style="cursor:pointer;" :class="{cur:index !== 1}">代理IP库</div>
   </div>
   <div class="tactics_l">
     <div>
       <div class="title">设置随机睡眠时间</div>
       <div style="margin-top: 20px">
         <a-form-model
           ref="ruleForm1"
           :model="form"
           :rules="rules"
           :label-col="labelCol"
           :wrapper-col="wrapperCol"
         >
           <a-form-model-item ref="date" label="随机睡眠时间" prop="date">
             <a-input-number v-model="form.date" :min="0" :max="10" :step="0.5"/> <span> 小时</span>
           </a-form-model-item>
         </a-form-model>
       </div>
     </div>
     <div style="margin-top: 50px">
       <div class="title">设置时机请求头</div>
       <div style="margin-top: 20px">
         <a-form-model
           ref="ruleForm"
           :model="form"
           :rules="rules"
           :label-col="labelCol"
           :wrapper-col="wrapperCol"
         >
           <a-form-model-item ref="text" label="设置时机请求头" prop="text">
             <a-textarea v-model="form.text" allow-clear :rows="20"/>
           </a-form-model-item>
           <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }" style="display: flex">
             <a-button type="primary" @click="onSubmit">
               提交
             </a-button>
<!--             <a-button style="margin-left: 10px;" @click="resetForm">-->
<!--               取消-->
<!--             </a-button>-->
           </a-form-model-item>
         </a-form-model>
       </div>
     </div>
   </div>
<!--     <div style="f"></div>-->
  </div>
</template>

<script>
import {save, sysAntireptileQuery} from "@/api/smuggle/intercalate";

export default {
  name: "index",
  data(){
    return {
      index:1,
      show:true,
      form:{
        date:undefined,
        text:undefined
      },
      labelCol: { span: 3 },
      wrapperCol: { span: 6 },
      rules: {
        date: [{ required: true, message: '请输入时间', trigger: 'blur' }],
        text: [{ required: true, message: '请设置时机请求头', trigger: 'blur' }],
      },
      pass:undefined,
      pass1:undefined
    }
  },
  watch:{
    index:{
      immediate: true,
      handler(a,b){
        if(this.index === 1){
          this.show = true
        } else {
          this.show = false
          this.$router.push({
            path:'/online/cgformList/015fa01762f54f519c9f9dca2ea155af'
          })
        }
      }
    }
  },
  mounted() {
    this.qidongs()

  },
  methods: {
    qidongs(){
      sysAntireptileQuery({id:'1'}).then(ser => {
        if(ser.success){
          this.form.date = Number(ser.result.randomSleepTime)
          this.form.text = ser.result.requestHeader
          console.log(this.form)
        }
      })
    },
    submitForm() {
      this.$refs.ruleForm.validate(valid => {
        console.log(valid)
        // this.passCheck = valid
        this.pass = valid
      });
      this.$refs.ruleForm1.validate(valid => {
        console.log(valid)
        // this.passCheck = valid
        this.pass1 = valid
      });
    },
    btnTactics(val){
      this.index = val
    },
    onSubmit(){
      this.submitForm()
      console.log(this.form)
      let data = {
        id:'1',
        randomSleepTime:this.form.date,
        requestHeader:this.form.text
      }
      if(this.pass && this.pass1){
        save(data).then(ser => {
          if(ser.success){
            this.$message.success('设置成功', 2,);
            this.qidongs()
          } else {
            this.$message.warn('设置失败！')
          }
        }).catch(err => {
          this.$message.warn('设置失败！')
        })
      } else {
        this.$message.warn('请检查你的数据！')
      }

    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
      this.$refs.ruleForm1.resetFields();
    },
  },
}
</script>

<style scoped>
.tactics_m{
  margin-top: 20px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
}
.tactics_r{
  padding: 20px 0 0 0;
  background-color: #FFFFFF;
  width: 15%;
}
.tactics_r>div{
  display: flex;
  padding: 10px 0 10px 45px;
  font-size: 16px;
}
.tactics_l{
  background-color: #FFFFFF;
  width: 84%
}
.tactics_l1{
  /*background-color: #FFFFFF;*/
  width: 84%
}
.title{
  font-size: 18px;
  padding: 10px 30px;
  font-weight: bold;
  border-bottom: 1px solid rgba(127, 127, 127, 0.37);
}
.cur{
  background-color: #E6F7FF;
}
</style>